<template>
	<view class="pages">
		<view class="bgsjsjjs">
		<view class="top">
			<!-- <image class="logo" src="../../static/images/96.png" mode=""></image> -->
			<view></view>
			<view class="lang" @click="open2">
				<image class="icon" v-if="$i18n.locale == 'ft'" src="../../static/img/zh.png" alt=""></image>
				<image class="icon" v-if="$i18n.locale == 'en'" src="../../static/img/en.png" alt=""></image>
				<image class="icon" v-if="$i18n.locale == 'jp'" src="../../static/img/rb.png" alt=""></image>
				<image class="icon" v-if="$i18n.locale == 'ko'" src="../../static/img/hg.png" alt=""></image>
				<image class="icon" v-if="$i18n.locale == 'zh'" src="../../static/img/zh.png" alt=""></image>
				<p class="text" v-if="$i18n.locale == 'ft'">港澳繁體</p>
				<p class="text" v-if="$i18n.locale == 'en'">English</p>
				<p class="text" v-if="$i18n.locale == 'jp'">にほんご</p>
				<p class="text" v-if="$i18n.locale == 'ko'">한국어</p>
				<p class="text" v-if="$i18n.locale == 'zh'">中文简体</p>
				<image class="icon1" src="../../static/images/56.png" mode=""></image>
			</view>
			<view class="mask2" v-if="show2">
				<view @click="lang('en')">
					<img src="../../static/img/en.png" alt="">
					<text>English</text>
				</view>
				<view @click="lang('ft')">
					<img src="../../static/img/zh.png" alt="">
					<text>港澳繁體</text>
				</view>
				<view @click="lang('zh')">
					<img src="../../static/img/zh.png" alt="">
					<text>中文简体</text>
				</view>
				<view @click="lang('jp')">
					<img src="../../static/img/rb.png" alt="">
					<text>にほんご</text>
				</view>
				<view @click="lang('ko')">
					<img src="../../static/img/hg.png" alt="">
					<text>한국어</text>
				</view>
			</view>
		</view>
		</view>
		<!-- <view class="title">{{$t('login.title45')}}</view> -->
		<!-- <view class="title1" style="margin-top: 120rpx;">{{$t('login.title46')}}</view> -->
		<view class="con">
			<view class="title2" style="margin-bottom: 140rpx;">{{$t('login.title2')}}</view>
			<!-- <view class="title3">{{$t('login.title3')}}</view> -->
			<view class="inputbox">
				<image class="label" src="../../static/images/22.png" mode=""></image>
				<input v-model="email" type="text" :placeholder="$t('login.title4')" placeholder-class="placeholder" />
			</view>
			<view class="inputbox">
				<image class="label" src="../../static/images/36.png" mode=""></image>
				<input v-model="psd" type="password" :placeholder="$t('login.title5')" placeholder-class="placeholder" />
			</view>
			<view class="dafadf">
				<view class="btn" @click="goNextPage('./newforgotpsd')">{{$t('login.title6')}}</view>
				<view class="btn" @click="goNextPage('./newregister')">{{$t('login.title41')}}</view>
			</view>
			<view class="btns" @click="denglu">{{$t('login.title7')}}</view>
			<!-- <view class="text1">{{$t('login.title8')}}</view>
			<view class="text1">{{$t('login.title9')}}</view> -->
		</view>
	</view>
</template>

<script>
	import {domains} from '../../config/domain.js'
	export default{
		data(){
			return{
				show2: false,
				email:'',
				psd:'',
				getLoginInfo:[]
			}
		},
		onLoad() {
			if(uni.getStorageSync('loginInfo')){
				this.getLoginInfo=uni.getStorageSync('loginInfo').split(',')
				this.email=this.getLoginInfo[0]
				this.psd=this.getLoginInfo[1]
			}
		},
		methods:{
			denglu(){
				let that = this;
				if(that.email == ''){
					uni.showToast({//提示
						icon:'none',
						title:that.$t('login.title28')
					})
					return false
				}
				if(that.psd == ''){
					uni.showToast({//提示
						icon:'none',
						title:that.$t('login.title29')
					})
					return false
				}
				let url = domains + 'api/user/login';
				let data = {
					account:that.email,
					password:that.psd
				}
				let mytype = 'post';
				uni.request({
					url,
					method: mytype,
					data,
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang')
					},
					success: res => {
						if(res.data.code == 0){
							uni.setStorage({
								key:'token',
								data:res.data.data
							})
							uni.setStorage({
								key:'tokenNum',
								data:String(res.data.data.token)
							})
							uni.setStorageSync('noticeshow',123);
							var loginInfo=String(that.email)+','+String(that.psd)
							uni.setStorage({
								key:'loginInfo',
								data:loginInfo
							})
							uni.navigateTo({
								url: '../index/index'
							})
						}else{
							uni.showToast({//提示
								icon:'none',
								title:res.data.msg
							})
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			},
			open2() {
				this.show2 = !this.show2
			},
			lang(e) {
				this.$i18n.locale = e;
				localStorage.setItem('lang', e);
				this.show2 = false;
				this.navList = [{
						'title': this.$t('indexTitle.title29'),
						"img": '../../static/images/3.png',
						"path": '../index/index'
					},
					{
						'title': this.$t('indexTitle.title30'),
						"img": '../../static/images/19.png',
						"path": '../activity/index'
					},
					{
						'title': this.$t('indexTitle.title31'),
						"img": '../../static/images/17.png',
						"path": '../configuration/index'
					},
					{
						'title': this.$t('indexTitle.title33'),
						"img": '../../static/images/15.png',
						"path": '../recharge/record'
					},
					{
						'title': this.$t('indexTitle.title34'),
						"img": '../../static/images/13.png',
						"path": '../vipStructure/vipStructure'
					},
					{
						'title': this.$t('indexTitle.title36'),
						"img": '../../static/images/9.png',
						"path": '../myPlatform/downloadPlatform'
					},
					{
						'title': this.$t('indexTitle.title32'),
						"img": '../../static/images/5.png',
						"path": '../userProfile/index'
					},
					{
						'title': this.$t('indexTitle.title35'),
						"img": '../../static/images/7.png',
						"path": '../recentNews/index'
					},
				]
				this.$emit("toTime", "我来自子组件")
			},
			goNextPage(page){
				uni.navigateTo({
					url:page
				})
			}
		}
	}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.pages{
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-image: url('../../static/images/95.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		/* background: linear-gradient(45deg,#6db8fc,#b0f2ff); */
	}
	.bgsjsjjs{
		width: 100%;
		height: 160px;
		background-image: url('../../static/images/95.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.top{
		width: 100%;
		padding: 0 40rpx;
		padding-top: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.logo{
		width: 50px;
		height: 70rpx;
	}
	.lang{
		width: 300rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.icon{
		width: 40rpx;
		height: 40rpx;
	}
	.text{
		margin-left: 10rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
	}
	.icon1{
		width: 40rpx;
		height: 40rpx;
	}
	.title{
		padding-left: 40rpx;
		font-size: 28rpx;
		color: #ffd237;
		margin-top: 80rpx;
	}
	.title1{
		width: 100%;
		padding-left: 40rpx;
		font-size: 44rpx;
		font-weight: bold;
		color: #fff;
		margin-top: 20rpx;
	}
	.con{
		width: 100%;
		height: 84.5vh;
		padding:  40rpx;
		background-color: #fff;
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: -50rpx;
	}
	.title2{
		font-size: 44rpx;
		color: #000;
		font-weight: bold;
		text-decoration-line:underline;
	}
	.title3{
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #999;
		margin-bottom: 120rpx;
	}
	.inputbox{
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: #e7e6ec;
		border-radius: 20rpx;
		padding:0 10rpx;
		margin-bottom: 30rpx;
	}
	.label{
		width: 80rpx;
		height: 40rpx;
		padding: 0 20rpx;
		border-right: 2rpx solid #000;
	}
	.inputbox input{
		flex: 1;
		padding-left: 30rpx;
		color: #000;
	}
	.placeholder{
		color: #000;
	}
	.btn{
		
		font-size: 28rpx;
		color: #000;
	}
	.dafadf{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.btns{
		width: 300rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		color: #fff;
		background-color: #ffd239;
		border-radius: 100rpx;
		margin-top: 60rpx;
		margin-bottom: 60rpx;
	}
	.text1{
		font-size: 28rpx;
		color: #ffd239;
		margin-bottom: 20rpx;
	}
	.mask2 {
		position: fixed;
		top: 96rpx;
		right: 20rpx;
		z-index: 99;
		background-color: #ffffff;
		border-radius: 50rpx;
		padding: 10rpx 30rpx;
		font-size: 24rpx;
	}
	
	.mask2 img {
		width: 44rpx;
		height: 44rpx;
		margin-right: 30rpx;
	}
	
	
	.mask2 view {
		display: flex;
		color: #000;
		align-items: center;
		margin: 20rpx;
	}
</style>